<template>
    <div v-show="showDialog" class="dialog">
      <div v-if="modal" class="dialog_mask"></div>
      <!--<div class="dialog_mask"></div>-->
      <div :style="style" :class="position" class="dialog_panel">
        <div v-if="title || showClose" :class="{'dialog_header_border': headerBorder}" class="dialog_header">
          <div v-if="title" :class="[{'dialog_title_icon': titleIcon}, titleIcon]" class="dialog_title">{{ title }}</div>
          <div v-if="showClose" @click="close" class="dialog_close el-icon-close"></div>
        </div>
        <div class="dialog_body"><slot>插入位置</slot></div>
        <div class="dialog_footer" v-if="$slots.footer"><slot name="footer">底部插入</slot></div>
      </div>
    </div>
</template>

<script>
  export default {
    name: 'alert-dialog',
    props: {
      title: {
        type: String,
        default: ''
      },
      width: {
        type: String,
        default: '50%'
      },
      visible: {
        type: Boolean,
        required: true,
        default: false
      },
      showClose: {
        type: Boolean,
        default: true
      },
      titleIcon: {
        type: String
      },
      headerBorder: {
        type: Boolean,
        default: true
      },
      top: {
        type: String,
        default: '15vh'
      },
      modal: {
        type: Boolean,
        default: true
      },
      dialogPosition: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        showDialog: false
      };
    },
    watch: {
      visible (newVal) {
        // console.log(newVal);
        this.showDialog = newVal;
      },
    },
    computed: {
      style() {
        const style = {};
        if (this.width) {
          style.width = this.width;
        }
        if (this.dialogPosition === '') {
          style.marginTop = this.top;
        }
        return style;
      },
      position() {
        switch (this.dialogPosition) {
          case 'center':
            return 'center_dialog';
          case 'right-bottom':
            return 'right_bottom';
          default:
            return '';
        }
      }
    },
    methods: {
      close() {
        this.showDialog = false;
        this.$emit('update:visible', false);
        this.$emit('close');
      }
    },
    created() {
      this.showDialog = this.visible;
      // console.log(this.visible);
    }
  };
</script>

<style lang="scss" scoped>
  .dialog{
    position: fixed;
    top: 0;
    left: 0;
    // z-index: 111;
    z-index: 90;
    height:100%;
    width:100%;
    overflow-y:scroll;
  }
  .dialog_mask{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 100;
    color: #2f3030;
  }
  .dialog_panel{
    width: 50%;
    background-color: #fff;
    border-radius: 8px;
    padding: 0 24px 24px;
    // margin-top: 50px;
    margin-bottom: 50px;
    position: absolute;
    top: 0;
    // top: 50%;
    left: 50%;
    transform: translate(-50%, 0);
    // transform: translate(-50%, -50%);
    z-index: 110;
  }
  .center_dialog{
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
  }
  .right_bottom{
    top: 100%;
    left: 100%;
    transform: translate(-100%, -100%);
    margin: 0;
  }
  .dialog_header{
    height: 50px;
    line-height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .dialog_header_border{
    border-bottom: 1px solid #d4d7da;
  }
  .dialog_title{
    font-size: 18px;
    height: 50px;
    line-height: 50px;
  }
  .dialog_close{
    font-size: 24px;
    cursor: pointer;
  }
  .dialog_title_icon{
    padding-left: 32px;
    background-size: 24px 24px;
    background-position: left center;
    background-repeat: no-repeat;
  }
  .icon_edit{
    background-image: url("~@/assets/img/icon_remark.png");
  }
  .dialog_body{
    padding: 20px 0 0;
  }
  .dialog_footer{
    padding: 16px 0 0;
    text-align: right;
  }
</style>
